<!--  -->
<template>
  <div class="fankuizhutu">
    <div class="zhutu1" ref="zhutu1"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        title: {
          text: "各镇累计资金收支出处汇总",
          textStyle: {
            color: "#fff",
            fontSize: 15,
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["支出", "收入"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: "11",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "支出(百万)",
            type: "bar",
            data: [],
            itemStyle: {
              normal: {
                color: "#64e1e3",
              },
            },
          },
          {
            name: "收入(百万)",
            type: "bar",
            data: [],
            itemStyle: {
              normal: {
                color: "#fedb5b",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {},
  created() {
    this.huoqushuju();
  },
  methods: {
    huoqushuju() {
      this.$axios
        .post("/fristpage/quCapitalByTown")
        .then((response) => {
          response.data.data.times.forEach((item, index) => {
            response.data.data.times[index] = item.split("办事处")[0];
            response.data.data.outputs[index] =
              response.data.data.outputs[index] / 1000000;
            response.data.data.inputs[index] =
              response.data.data.inputs[index] / 1000000;
          });
          this.options.xAxis[0].data = response.data.data.times;
          this.options.series[0].data = response.data.data.outputs;
          this.options.series[1].data = response.data.data.inputs;
          this.zhutu1();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    zhutu1() {
      var myChart = this.$echarts.init(this.$refs.zhutu1);
      myChart.setOption(this.options);
    },
  },
};
</script>
<style lang='less' scoped>
.fankuizhutu {
  height: 100%;
  padding: 10px;
}

.zhutu1 {
  height: 81%;
  padding: 0px;
}
</style>